import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './yapp.css'

type DoctorItem = {
  id: number
  name: string
  title: string
  dept: string
  hospital: string
  skills: string
}

const mockDoctors: DoctorItem[] = [
  {
    id: 1,
    name: '王家璧',
    title: '主任医师',
    dept: '皮肤科',
    hospital: '北京京城皮肤医院',
    skills:
      '玻尿酸、色素性皮肤病、痤疮、敏感肌、白癜风、银屑病等疑难皮肤病；皮肤激光治疗'
  },
  {
    id: 2,
    name: '姜国娟',
    title: '主任医师',
    dept: '皮肤科',
    hospital: '北京京城皮肤医院',
    skills:
      '色素性皮肤病（太田痣、咖啡斑、雀斑等）、血管型皮肤病（鲜红斑痣、血管瘤等）'
  },
  {
    id: 3,
    name: '季素珍',
    title: '主任医师',
    dept: '皮肤科',
    hospital: '北京京城皮肤医院',
    skills:
      '白癜风、痤疮、黄褐斑等个体定制综合治疗方案，改善皮肤屏障功能'
  }
]

function Index() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState<'主页' | '医院介绍' | '科室' | '医生' | '资讯' | '特色栏目'>('主页')
  const slides = [0, 1, 2]
  const [current, setCurrent] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % slides.length)
    }, 3000)
    return () => clearInterval(timer)
  }, [slides.length])

  return (
    <div className="yapp-page">
      {/* 顶部导航与标题 */}
      <div className="yapp-topbar">
        <button className="icon-btn" onClick={() => navigate(-1)}>←</button>
        <div className="topbar-title">北京京城皮肤医院</div>
        <div className="topbar-actions">
          <button className="icon-btn">⋯</button>
        </div>
      </div>

      {/* 顶部轮播图 */}
      <div className="hospital-banner">
        <div className="banner-carousel">
          <div
            className="slides"
            style={{ transform: `translateX(-${current * 100}%)` }}
          >
            {slides.map((s) => (
              <div key={s} className={`slide banner-${s + 1}`}></div>
            ))}
          </div>
          <div className="dots">
            {slides.map((_, i) => (
              <span
                key={i}
                className={`dot ${current === i ? 'active' : ''}`}
                onClick={() => setCurrent(i)}
              />
            ))}
          </div>
        </div>
      </div>

      {/* 标签导航 */}
      <div className="tabs">
        {['主页', '医院介绍', '科室', '医生', '资讯', '特色栏目'].map((t) => (
          <div
            key={t}
            className={`tab-item ${activeTab === t ? 'active' : ''}`}
            onClick={() => setActiveTab(t as typeof activeTab)}
          >
            {t}
          </div>
        ))}
      </div>

      {/* 医院卡片 */}
      <div className="hospital-card">
        <div className="hospital-logo">🌸</div>
        <div className="hospital-info">
          <div className="hospital-title">北京京城皮肤医院</div>
          <div className="hospital-tags">
            <span className="tag tag-gray">专科</span>
            <span className="tag tag-green">社会办医</span>
          </div>
          <div className="hospital-desc">
            医院简介：北京京城皮肤医院是一家由北京市卫生健康委批准建设的三级皮肤专科医院。
          </div>
          <div className="hospital-meta">
            <div className="meta-item">📍 北京市朝阳区双泉堡甲4号</div>
            <div className="meta-item">📞 010-64888999</div>
          </div>
        </div>
      </div>

      {/* 医生团队 */}
      <div className="doctor-section">
        <div className="section-header">
          <div className="section-title">医生团队</div>
          <div className="section-more">更多›</div>
        </div>

        <div className="doctor-list">
          {mockDoctors.map((d) => (
            <div key={d.id} className="doctor-item">
              <div className="doctor-avatar">👨‍⚕️</div>
              <div className="doctor-content">
                <div className="doctor-line">
                  <div className="doctor-name">{d.name}</div>
                  <div className="doctor-title">{d.title}</div>
                  <button className="follow-btn">去挂号</button>
                </div>
                <div className="doctor-meta">{d.dept} ｜ {d.hospital}</div>
                <div className="doctor-skills">擅长：{d.skills}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="bottom-bar">
        <button className="bar-btn ghost" onClick={() => navigate('/details')}>在线咨询</button>
        <button className="bar-btn primary" onClick={() => navigate('/yapp')}>预约挂号</button>
      </div>
    </div>
  )
}

export default Index
